<template>
  <div>
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <app-menu :collapse="isCollapse"></app-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="top">
            <div class="top1">
              <span> <img src="/a.jpg" alt="" /></span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>改密</el-dropdown-item>
                  <div @click="backs">
                    <el-dropdown-item>退出</el-dropdown-item>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <app-bread
            @changecoll="changecoll"
            :isCollapse="isCollapse"
          ></app-bread>
        </el-header>
        <el-main>
          <app-table></app-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AppMenu from "@/components/AppMenu";
import AppBread from "@/components/AppBreadcrumb";
import AppTable from "@/components/AppTable.vue";
export default {
  name: "Home",
  components: {
    AppMenu,
    AppBread,
    AppTable,
  },
  data() {
    return {
      isCollapse: false,
      // datas1: [],
    };
  },
  // created() {
  //   const datas = JSON.parse(localStorage.getItem("data"));
  //   console.log(datas.manu);
  //   this.datas1 = formatMenu(datas.manu, 0);
  //   console.log(this.datas1);
  // },
  methods: {
    changecoll() {
      this.isCollapse = !this.isCollapse;
    },
    backs() {
      this.$router.push("/login");
    },
  },
  watch:{
      "$root":{

        function (params) {
           console.log(params)
        }
      }
      
   
  }
};
</script>
<style lang="less" scoped>
.el-aside {
  height: 100vh;
  background: #ccc;
}
.top {
  border-bottom: 1px solid #666;
  padding: 0.375rem;
  height: 2rem;
  .top1 {
    float: right;
    display: flex;
    align-items: center;
  }
  span {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    img {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%;
    }
  }
}
</style>
